<template>
	<view class="Receipt">
		<view class="container">
			<view class="h3">{{ entity.CompanyName }}</view>
			<view class="cell" style="display: flex;justify-content: space-between;">
				<text v-if="entity.OrderType ==1">单号: {{getReplaceId("B"+entity.Id)}} </text>
				<text v-else>单号: {{getReplaceId("S"+entity.Id)}} </text>
				<view v-if="IsOverdue" class="tag" style="display: flex;flex-direction: column;align-items: center;">
					<image style="width: 100rpx;height: 100rpx;" src="../../static/yuqi.png" mode=""></image>
				</view>
			</view>
			<view class="cell" style="display: flex;justify-content: space-between;">
				<text>销售日期:{{ entity.CreateTime?entity.CreateTime.substring(0, 19):'' }}</text>
				<text v-if="IsOverdue"> 逾期 {{ OverdueDay }}天</text>
			</view>
			<view class="cell"><text>客户:</text>{{ entity.cCusName||'散客' }}</view>
			<view class="cell"><text>客户地址:</text>{{ entity.cCusAddress||'' }}</view>
			<view class="cell"><text>客户电话:</text>{{ entity.cCusPhone||'' }}</view>
			<view class="cell"><text>业务员:</text>{{ entity.RealName||'' }}</view>
			<view class="tableRow" style="border-bottom: 1px dashed #ccc; margin-top: 10px; line-height: 2">
				<text class="tableIndex"></text>
				<text class="tableCol left">编码/品名</text>
				<text class="tableCol">数量</text>
				<text class="tableCol">单位</text>
				<text class="tableCol">单价</text>
				<text class="tableCol">金额</text>
			</view>
			<view style="padding: 10px 0">
				<view v-for="(item, index) in data" :key="index">
					<view class="tableRow">
						<text class="tableIndex">{{ index + 1 }}</text>
						<text class="tableCol left">{{ item.cInvCode }}</text>
						<text class="tableCol">{{ item.Quantity }}</text>
						<text class="tableCol">{{ item.GroupName }}</text>
						<text class="tableCol">{{ momenyFormat(item.Price) }}</text>
						<text class="tableCol">{{ momenyFormat(item.Money) }}</text>
					</view>
					<view class="tableRow col1">
						{{ item.InventName }}
					</view>
				</view>
			</view>
			<view class="tableRow" style="border-top: 1px dashed #ccc; line-height: 2; margin-bottom: 10px">
				<text class="tableIndex"></text>
				<text class="tableCol left">合计</text>
				<text class="tableCol">{{ entity.TotalQuantity }}</text>
				<text class="tableCol"></text>
				<text class="tableCol">{{ momenyFormat(entity.TotalSum) }}</text>
			</view>
			<view class="cell">
				<text>{{entity.PaymentType==null?'赊货':entity.PaymentType}}:</text>
				{{entity.Type == 0?momenyFormat(entity.ReceiveSum):momenyFormat(entity.PendingSum)}}
			</view>
		</view>
		<view v-if="Sign" style="background-color: #fff;padding: 20rpx;box-sizing: border-box;font-weight: bold;">
			客户签字
		</view>
		<view v-if="Sign" class="imgBox">
			<img class="img" :src="Sign" alt="客户签名">
		</view>
		<!-- 多项操作 -->
		<uni-popup ref="share" type="share" safeArea backgroundColor="#fff">
			<uni-popup-share title="操作" :bottom-data="bottomData" @select="selectShare"></uni-popup-share>
		</uni-popup>
		<!-- 短信发送 -->
		<uni-popup ref="popup" type="dialog">
			<uni-popup-dialog mode="input" message="成功消息" title="短信分享" :duration="2000" :before-close="true"
				@close="close" @confirm="confirm" placeholder="请输入客户手机号"></uni-popup-dialog>
		</uni-popup>
		<!-- 小票短语 -->
		<!-- <uni-popup ref="ReceiptPhrasePopup" type="dialog">
			<uni-popup-dialog mode="input" message="成功消息" title="小票短语" :duration="2000" :before-close="true"
				@close="ReceiptPhraseClose" @confirm="ReceiptPhraseConfirm" :value="ReceiptPhrase"
				placeholder="请输入小票短语"></uni-popup-dialog>
		</uni-popup> -->
		<bleConnect ref="bleConnect" :Sign="Sign" :printData="entity" :data="data" v-show="false" />
	</view>
</template>

<script>
	import bleConnect from './bleConnect.vue'
	import {
		regPhone
	} from '@/utils/regExp.js'
	import {
		momenyFormat
	} from '@/util/util.js'
	import tkiQrcode from "@/components/tki-qrcode/tki-qrcode.vue"
	export default {
		components: {
			tkiQrcode,
			bleConnect
		},
		data() {
			return {
				Id: "",
				entity: {},
				data: [],
				// /是否显示编辑
				isEdit: false,
				bottomData: [{
						text: '打印',
						icon: '/static/share/dayin.png',
						name: 'dayin'
					},
					{
						text: '微信签收',
						icon: '/static/share/wx.png',
						name: 'wxfenxiang'
					},
					{
						text: '短信签收',
						icon: '/static/share/duanxin.png',
						name: 'dxfenxiang'
					},
					{
						text: '作废',
						icon: '/static/share/zuofei.png',
						name: 'shanchu'
					},
				],
				qrcode: '',
				Sign: '',
				type: '',
				xpqrcode: '',
				ReceiptPhrase: '', //小票短语
				billObj: {},
				// 是否逾期
				IsOverdue:"",
				// 逾期天数
				OverdueDay:""
			}
		},
		onLoad(options) {
			console.log('传递过来的options传递过来的o递过来的options传递过来的options传递过来的optionsptions传递过来的options', options)
			// if(options.OverdueDay){
			// 	this.OverdueDay =  options.OverdueDay
			// }
			let title =uni.getStorageSync('webviewTitle')
			// 动态修改当前下票页面标题
			// 动态设置导航栏文字
			uni.setNavigationBarTitle({
				title: title  || '票据明细',
			});
			
			this.ReceiptPhrase = uni.getStorageSync('ReceiptPhrase')
			this.Id = options.Id
			this.billId = options.billId
			
			if(options.Id){
				// 获取逾期天数 逾期状态数据
				this.getSelectOverdue()
			}
			
			this.xpqrcode = 'https://hzq.yoojet.com/#/App/Receipt?Id=' + this.Id
			setTimeout(() => {
				console.log(this.$refs.qrcode);
				this.$refs.qrcode._makeCode()
			}, 500)
			if (options.type) this.type = options.type
			this.getTheData(this.Id, options.print)
			if (!options.billId) return
			this.$http('post', '/BO/BillList/GetBillDetail', {
				id: options.billId
			}).then(res => {
				if (res.Success) {
					this.qrcode = res.Data.QrCode
					this.Sign = res.Data.Sign
					this.billObj = res.Data
				}
			})

		},
		// 监听原生导航栏的返回按钮  uniapp
		onNavigationBarButtonTap() {
			// console.log('是否签名', this.Sign)
			// if(this.Sign === null){
			// 	// 显示可以编辑
			// 	this.isEdit=true
			// 	let obj={
			// 		text: '编辑',
			// 		icon: '/static/share/isEdit.png',
			// 		name: 'edit'
			// 	}
			// 	// 判断数组中的个数 避免出现频繁push的情况  只push一次即可
			// 	if(this.bottomData.length==4){
			// 		this.bottomData.push(obj)
			// 	}
			// }
			this.$refs.share.open()
		},
		methods: {
			// 字符串空格处理
			getReplaceId(data){
				if(data){
					return data.replace(/\s/g, '').replace(/(.{4})/g, "$1 ")
				}
			},
			// 获取逾期天数逾期状态数据
			getSelectOverdue(){
				this.$http('post', '/BO/BIlling/SelectOverdue?Id='+this.Id).then(res => {
					if (res.Success){
						console.log('是否成功了',res)
						this.IsOverdue=res.Data.IsOverdue
						this.OverdueDay=res.Data.OverdueDay
					}
					else{
						 this.$api.msg(res.Msg)
					}
				})
			},
			
			
			selectShare(e) {
				console.log('点击的是', e)
				if (e.item.text == '打印') {
					this.$refs.bleConnect.startSearch()
				} else if (e.item.name == 'wxfenxiang') {
					let title = uni.getStorageSync('CompanyInfo').ReceiptTitle
					if (this.entity.Type == 0) {
						title = title ? title : '电子小票'
						uni.share({
							provider: "weixin",
							scene: "WXSceneSession",
							type: 0,
							title: title, // 分享标题
							summary: '您在' + this.entity.CompanyName + '的购物电子小票,请点击查看',
							href: 'https://hzq.yoojet.com/#/App/Receipt?Id=' + this.entity.Id,
							imageUrl: "https://hzq.yoojet.com/wx.png", //分享封面图片
							success: function(res) {
								// 此处是调起微信分享成功的回调
							},
							fail: function(err) {
								// 此处是调起微信分享失败的回调
								console.log(err);
							}
						});
						return
					}

					if (!this.qrcode) return this.$api.msg('当前订单无法分享')
					title = title ? title : '货品签收'
					uni.share({
						provider: "weixin",
						scene: "WXSceneSession",
						type: 5,
						title: title, // 分享标题
						imageUrl: "https://hzq.yoojet.com/wx.png", //分享封面图片
						miniProgram: {
							id: 'gh_81c3d38d48ca',
							path: 'pages/index/index?q=' + encodeURIComponent(this.qrcode),
							type: '0',
							webUrl: 'https://hzq.yoojet.com'
						},
						success: function(res) {
							// 此处是调起微信分享成功的回调
						},
						fail: function(err) {
							// 此处是调起微信分享失败的回调
							console.log(err);
						}
					});
				} else if (e.item.name == 'dxfenxiang') {
					// if (!this.qrcode) return this.$api.msg('当前订单无法分享')
					this.$refs.popup.open()
				} else if (e.item.text == '作废') {
					if (this.billObj.Status == 1 || this.billObj.Status == 2 || this.billObj.Status == 3 || this.billObj
						.Status == 4) return this.$api.msg('当前单据无法作废')
					uni.showModal({
						title: '提示',
						content: '此操作将作废本条单据,确认继续吗?',
						success: (val) => {
							if (val.confirm) {
								uni.showLoading()
								this.$http('post', '/BO/BIlling/CancelBillingData?Id=' + this.Id).then(
									res => {
										uni.hideLoading()
										if (!res.Success) return this.$api.msg(res.Msg)
										this.$api.msg('操作成功')
										setTimeout(() => {
											uni.switchTab({
												url: '/pages/index/index'
											})
										}, 1000)
									})
							}
						}
					})
				}
				// else if(e.item.text == '编辑'){
				// 	// 点击的是编辑
				// 	console.log('点击的是编辑了', this.data, this.entity)

				// 	// console.log('获取传递的购物车数据this.data',this.data)
				// 	this.$http('post', '/BO/BIlling/SaveShoppingCartData?Id=' +  this.entity.Id)
				// 		.then(res => {
				// 			if (res.Success) {
				// 				console.log('webview是否又加入购物车',res.Data)
				// 			} else {}
				// 	})
				// 	// // 作废单子
				// 	// this.$http('post', '/BO/BIlling/ReopenBillingData', {Id:this.entity.Id}).then(res => {
				// 	// 	if (res.Success) console.log('获取是否作废成功了',res)
				// 	// 	else this.$api.msg(res.Msg)
				// 	// })

				// 	// 跳转货单明细页
				// 	uni.navigateTo({
				// 		url:"/pages/orderDetail/orderDetail?title='小票'&CommpayId="+ this.entity.CompanyId+'&customer'+this.entity.cCusName
				// 	})
				// }
			},
			//短信发送
			send(phone, str, cName) {
				this.$http('post', '/BO/BIllcollection/SendElectronicReceipt', {
					"CompanyName": cName,
					"ReceiptId": str,
					"Phone": phone
				}).then(res => {
					if (res.Success) this.$api.msg('短信发送成功')
					else this.$api.msg(res.Msg)
				})
			},
			// 短信分享
			confirm(e) {
				console.log(e);
				if (!regPhone.test(e)) return this.$api.msg('请输入正确的手机号')
				// 请求
				this.send(e, this.entity.Id, this.entity.CompanyName)
				this.$refs.popup.close()
			},
			close() {
				this.$refs.popup.close()
			},
			// 小票短语
			ReceiptPhraseClose() {
				this.$refs.ReceiptPhrasePopup.close()
			},
			ReceiptPhraseConfirm(e) {
				uni.setStorageSync('ReceiptPhrase', e)
				this.$refs.bleConnect.startSearch()
				this.$refs.ReceiptPhrasePopup.close()
			},
			// 获取小票列表数据和单号相关信息
			getTheData(Id, print) {
				this.$http('post', "/BO/BIlling/GetBllingDetail?Id=" + Id).then((res) => {
					if (res.Success) {
						this.data = res.Data.detalist;
						this.entity = res.Data.maindata;

						// 现收散客，小票分享的时，按钮的名字要改为分享，而不是签收
						if (this.entity.Type == 0 && this.entity.cCusName == null) {
							this.bottomData[1].text = "微信分享"
							this.bottomData[2].text = "短信分享"
						}

						// 商品结算进入 直接打印
						if (print) {
							console.log(this.entity);
							setTimeout(() => {
								this.$refs.bleConnect.startSearch()
							}, 1500)
						}
					} else this.$message.error(res.Msg);
				});
			},
			momenyFormat(num) {
				return momenyFormat(num)
			},
		}
	}
</script>

<style lang="scss" scoped>
	.Receipt {
		.col1{
			padding-left: 25px;
		}
		.imgBox {
			display: flex;
			align-items: center;
			justify-content: center;
			height: 180px;
			overflow: hidden;
			width: 100%;
			background-color: #fff;

			.img {
				transform: rotate(-90deg);
				width: 160px;
				background-color: #fff;
			}
		}

		.txt {
			margin-top: 10px;
		}

		.container {
			margin: 0 auto;
			color: #000;
			padding: 10px 40rpx;
			.tag{
				text-align: right;
				margin-bottom: 20rpx;
			}

			.h3 {
				text-align: center;
				font-weight: bold;
			}

			.cell {
				display: flex;
				line-height: 2;

				span {
					width: 40px;
				}
			}

			.tableRow {
				font-size: 12px;
				display: flex;
				align-items: center;

				span {
					overflow: hidden;
				}

				.tableCol {
					flex: 1;
					text-align: right;
					// overflow: hidden;
				}

				.left {
					text-align: left;
				}

				.tableIndex {
					width: 25px;
				}
			}
		}
	}
</style>